<div class="page-title">
  <h1>
             高级表单
  </h1>
</div>
<div class="row">
  <div class="col-lg-12">
    <div class="widget-container fluid-height">
      <div class="heading">
        <i class="icon-edit"></i>表单向导
      </div>
      <div class="widget-content">
        <div class="wizard" id="wizard">
          <div class="padded">
            <ul class="wizard-nav">
              <li>
                <a data-toggle="tab" href="#tab1">1</a>
              </li>
              <li>
                <a data-toggle="tab" href="#tab2">2 </a>
              </li>
              <li>
                <a data-toggle="tab" href="#tab3">3</a>
              </li>
            </ul>
            <div class="progress progress-striped active">
              <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="progress-bar" role="progressbar"></div>
            </div>
            <div class="tab-content">
              <div class="tab-pane" id="tab1">
                <h2>
                    登录
                </h2>
                <form role="form">
                  <div class="form-group">
                    <label for="email">邮件地址</label><input class="form-control" id="name" placeholder="i@zi-han.net" type="email">
                  </div>
                  <div class="form-group">
                    <label for="password">密码</label><input class="form-control" id="password" placeholder="4-8 字符" type="password">
                  </div>
                </form>
              </div>
              <div class="tab-pane" id="tab2">
                <h2>
                    个人信息
                </h2>
                <form role="form">
                  <div class="form-group">
                    <label for="name">姓名</label><input class="form-control" id="name" placeholder="" type="text">
                  </div>
                  <div class="form-group">
                    <label for="country">国家</label><input class="form-control" id="country" placeholder="" type="text">
                  </div>
                </form>
              </div>
              <div class="tab-pane" id="tab3">
                <h2>
                    付款信息
                </h2>
                <form role="form">
                  <div class="form-group">
                    <label for="name-credit">信用卡姓名</label><input class="form-control" id="name-credit" placeholder="" type="text">
                  </div>
                  <div class="form-group">
                    <label for="credit-card">信用卡卡号</label><input class="form-control" id="credit-card" placeholder="" type="text">
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="pager">
            <div class="btn btn-default-outline btn-previous">
              <i class="icon-long-arrow-left"></i>返回
            </div>
            <div class="btn btn-primary-outline btn-next">
                 继续<i class="icon-long-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <div class="widget-container fluid-height">
      <div class="heading">
        <i class="icon-edit"></i>WYSIWYG 富文本编辑器
      </div>
      <div class="widget-content padded">
        <div id="summernote">
                  编辑文本
        </div>
      </div>
    </div>
  </div>
</div>



<script>
function initFormAdvancedPage() {
    
   /*
    # =============================================================================
    #   Form wizard
    # =============================================================================
    */

    $("#wizard").bootstrapWizard({
      nextSelector: ".btn-next",
      previousSelector: ".btn-previous",
      onNext: function(tab, navigation, index) {
        var $current, $percent, $total;
        if (index === 1) {
          if (!$("#name").val()) {
            $("#name").focus();
            $("#name").addClass("has-error");
            return false;
          }
        }
        $total = navigation.find("li").length;
        $current = index + 1;
        $percent = ($current / $total) * 100;
        return $("#wizard").find(".progress-bar").css("width", $percent + "%");
      },
      onPrevious: function(tab, navigation, index) {
        var $current, $percent, $total;
        $total = navigation.find("li").length;
        $current = index + 1;
        $percent = ($current / $total) * 100;
        return $("#wizard").find(".progress-bar").css("width", $percent + "%");
      },
      onTabShow: function(tab, navigation, index) {
        var $current, $percent, $total;
        $total = navigation.find("li").length;
        $current = index + 1;
        $percent = ($current / $total) * 100;
        return $("#wizard").find(".progress-bar").css("width", $percent + "%");
      }
    });
    
   
    /*
    # =============================================================================
    #   WYSIWYG Editor
    # =============================================================================
    */

    if ($('#summernote').length) {
      $('#summernote').summernote({
        height: 300,
        focus: true,
        toolbar: [['style', ['style']], ['style', ['bold', 'italic', 'underline', 'clear']], ['fontsize', ['fontsize']], ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['height', ['height']], ['insert', ['picture', 'link']], ['table', ['table']], ['fullscreen', ['fullscreen']]]
      });
    }

}

$(document).ready(function() {
    LoadFormAdvancedScript(initFormAdvancedPage);
});
</script>